import { useMemo } from 'react';

import AppTagSelect from '@/components/AppTagSelect';
import { useUserInfo } from '@/store/userStore';

import type { ButtonProps } from 'antd';

interface WorkBaseProps {
  activeFilter?: string;
  name?: string;
  tagChange?: (data: string) => void;
  setActiveFilter?: (data: string) => void;
}
type FilterType = 'all' | 'pending' | 'pass' | 'unpublished' | 'official' | 'public';

export default function WorkBase({
  activeFilter,
  name,
  tagChange = () => {},
  setActiveFilter = () => {},
}: WorkBaseProps) {
  const { role } = useUserInfo();

  // 定义过滤选项配置
  const filterOptionsManager: {
    key: FilterType;
    label: string;
    buttonProps?: ButtonProps;
    icon: string;
  }[] = [
    { key: 'all', label: '全部', icon: 'work-ic1' },
    { key: 'pass', label: '发布', icon: 'work-ic3' },
    { key: 'unpublished', label: '未发布', icon: 'work-ic2' },
    { key: 'pending', label: '审核', icon: 'work-ic4' },
  ];

  const filterOptionsMarket: {
    key: FilterType;
    label: string;
    buttonProps?: ButtonProps;
    icon: string;
  }[] = [
    { key: 'all', label: '全部', icon: 'work-ic1' },
    { key: 'official', label: '官方模板', icon: 'work-ic3' },
    { key: 'public', label: '公共模板', icon: 'work-ic2' },
  ];
  const filterOptions = useMemo(() => {
    return name === '1' ? filterOptionsManager : filterOptionsMarket;
  }, [name]);

  // const filterOptions = name === '1' ? filterOptionsManager : filterOptionsMarket;
  // 处理过滤逻辑
  const handleFilterClick = (type: FilterType) => {
    setActiveFilter(type);
  };

  // 如果没有合适的角色，直接返回 null
  if (!(role?.code === 'super_admin' || role?.code === 'admin')) {
    return null;
  }

  return (
    <div className="flex items-center justify-between">
      <div className="flex cursor-pointer items-center justify-start gap-2">
        {filterOptions.map(({ key, label, icon }) => (
          <div
            key={key}
            className={`  !mr-1 mb-4 flex !h-8 items-center  justify-center rounded-md px-3 text-sm`}
            onClick={() => handleFilterClick(key)}
            style={
              activeFilter === key
                ? {
                    background: 'linear-gradient(90deg, #1B6DFA 0%, #00D0FE 181.25%)',
                    fontWeight: 'bold',
                    color: '#fff',
                  }
                : { background: 'white', color: '#4E5969' }
            }
          >
            {/* <SvgIcon
              icon={icon}
              className={`mr-1 ${activeFilter === key ? 'text-@brand-color-active' : ''} `}
            /> */}
            <span>{label}</span>
          </div>
        ))}
      </div>
      {name === '1' && (
        <div>
          <AppTagSelect className="rg-custom-select w-[150px]" tagChange={tagChange} />
        </div>
      )}
    </div>
  );
}
